<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="central/include :: header('修改工序')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-centralProcessStep-edit" th:object="${topCentralProcessStep}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">工序名称：</label>
                <div class="col-sm-8">
                    <input name="name" th:field="*{name}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">图标：</label>
                <div class="col-sm-8">
                    <input id="icon" name="icon" class="form-control" type="text" placeholder="选择图标" th:field="*{icon}">
                    <div class="ms-parent" style="width: 100%;">
                        <div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
                            <div data-th-include="system/menu/icon"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">工艺：</label>
                <div class="col-sm-8">
                    <select name="artProcessId" class="form-control m-b" required>
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">操作类型：</label>
                <div class="col-sm-8">
                    <select name="operationType" class="form-control m-b" th:with="type=${@dict.getType('central_operation_type')}">
                        <option value="">请选择</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{operationType}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group" id="app">
                <label class="col-sm-3 control-label">任务指令编号列表：</label>
                <div class="col-sm-8">
                    <el-select v-model="taskCmdIds" multiple>
                        <el-option v-for="(data,index) in taskCmdList" :key="index" :value="data.value" :label="data.label"></el-option>
                    </el-select>
                    <input name="taskCmdIds"  type="hidden" th:field="*{taskCmdIds}">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('data_normal_disable')}">
                        <input type="radio" th:id="${'state_' + dict.dictCode}" name="state" th:value="${dict.dictValue}" th:field="*{state}">
                        <label th:for="${'state_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">权重：</label>
                <div class="col-sm-8">
                    <input name="weight" th:field="*{weight}" type="text" class="form-control" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">描述：</label>
                <div class="col-sm-8">
                    <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="central/include :: footer" />
    <th:block th:include="include :: select-component" />
    <th:block th:include="central/include :: import-js('centralArtProcess')"/>
    <th:block th:include="central/include :: import-js('centralTaskCmd')"/>
    <script th:inline="javascript">
        var prefix = ctx + "central/centralProcessStep";
        $("[name=weight]").inputSpinner();

        $("#form-centralProcessStep-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            $("[name=taskCmdIds]").val(vm.$data.taskCmdIds)
            if ($.validate.form()) {
                $.operation.update(prefix, $.common.formToJSON());
            }
        }

        const vm = new Vue({
            el:'#app',
            data(){
                return{
                    taskCmdIds:[],
                    taskCmdList:[]
                }
            },methods:{
                getTaskCmdList(){
                    $.centralTaskCmdBusiness.getSimpleListData()
                        .then(res=>{
                            this.taskCmdList = res.data
                        })
                }
            },created(){
                const taskCmdIds = [[${topCentralProcessStep.taskCmdIds}]]
                this.taskCmdIds = taskCmdIds.split(',').map(item=>+item)
                console.log(" this.taskCmdIds ", this.taskCmdIds )
                this.getTaskCmdList()
            }
        })

        //获取工艺列表
        function getArtProcessList(){
            $.artProcessBusiness.getSimpleList({$select:$('[name=artProcessId]'),selectValue:[[${topCentralProcessStep.artProcessId}]]})
        }

        $(function(){
            getArtProcessList()

            $("input[name='icon']").focus(function() {
                $(".icon-drop").show();
            });
            $("#form-centralProcessStep-add").click(function(event) {
                var obj = event.srcElement || event.target;
                if (!$(obj).is("input[name='icon']")) {
                    $(".icon-drop").hide();
                }
            });
            $(".icon-drop").find(".ico-list i").on("click", function() {
                $('#icon').val($(this).attr('class'));
            });

        })
    </script>
</body>
</html>